
window.onload = function(){
	var left = document.getElementById('left_pic');
	var box = document.getElementById('box_pic');
	var right = document.getElementById('right_pic');
	var rpic = document.getElementById('rpic_pic');

	// 给左侧加鼠标移动事件
	cover_pic.onmousemove = function(e){
		// 获得事件对象
		var ev = window.event || e;
		// 获得鼠标距离事件源的距离
		var mouse_left = ev.offsetX || ev.layerX;
		var mouse_top = ev.offsetY || ev.layerY;
		// document.title = mouse_left+'|'+mouse_top;


		// 计算小色块的位置
		var box_top = mouse_top-88;
		var box_left = mouse_left-88;
		// 把关
		if(box_top<0){
			box_top=0;
		}
		if(box_top>175){
			box_top=175;
		}
		if(box_left<0){
			box_left=0;
		}
		if(box_left>175){
			box_left=175;
		}

		// 给小色块赋值
		box.style.left = box_left+'px';
		box.style.top = box_top+'px';

		// 计算右侧大图的left
		var rpic_left = box_left*-8/3.5;
		var rpic_top = box_top*-8/3.5;

		// 给右侧大图赋值
		rpic.style.left = rpic_left+'px';
		rpic.style.top = rpic_top+'px';
	}

	// 鼠标移入事件
	cover_pic.onmouseover = function(){
		// 让左侧小色块显示，让右侧区域显示
		box.style.display = 'block';
		right.style.display = 'block';
	}

	// 鼠标移出事件
	cover_pic.onmouseout = function(){
		// 让左侧小色块隐藏，让右侧区域隐藏
		box.style.display = 'none';
		right.style.display = 'none';
	}
}

